<!--
 * @docName: entAccountList.vue
 * @Author: mwl
 * @Date: 14:26
 * @LastEditors: mwl
 * @LastEditTime: 14:26
-->
<template>
  <div class='content'>
    <div class='title'>账户充值</div>
      <div class="table-page-search-wrapper" style="margin-top: 10px;">
        <a-form layout="inline">
          <a-row  type="flex" justify="space-between" align="top" style="margin-top: 10px">
            <a-col  flex="200px">
              请选择充值企业
            </a-col>
            <a-col flex="600px" >
                <a-col :md="14" :lg="14">
                  <a-form-item label="企业/法人名称">
                    <a-input placeholder="请输入" v-model="queryParam.keyWord"></a-input>
                  </a-form-item>
                </a-col>

                <a-col :offset="1" :md="9" :lg="9">
                 <a-button type="primary" @click="searchQuerys" icon="search">查询</a-button>
                  <a-button @click="searchResets" icon="reload" style="margin-left: 10px">重置</a-button>
                </a-col>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div>
        <a-table
          ref="table"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="tableData"
          :pagination="ipagination"
          :loading="loading"
          @change="handleTableChange"
          :scroll="{ x: 800}">
          <!--          :row-selection="{ onChange: rowSelection, type: 'radio' }"-->
          <!-- 字符串超长截取省略号显示-->
          <span slot="esContent" slot-scope="text">
          <j-ellipsis :value="text" :length="10" />
        </span>
          <!--渠道类型-->
          <span slot="registerType" slot-scope="text, record">
            {{{1:'个体工商户',2:'个人独资企业',3:'有限公司',4:'合伙企业'}[text]}}
        </span>
          <span slot="action" slot-scope="text, record">
          <a href="javascript:;" @click="goTo(record)">充值</a>
        </span>
        </a-table>
      </div>
<!--    <a-row>
      <div class='container-title'>充值账号 <a-spin :spinning='loading' /></div>
      <a-col :span="12">
        <div class='container-div'>
          <div class='text'>请使用已配置的银行卡号，向下方账号中转账充值，完成充值后，企业账户可用于支付</div>
          <div class='card-div'>
            <a-row>
              <a-col :span="20">
                <a-card v-if='infoZjDetails'>
                  <p><span class='span'>充值账号：</span>{{ infoZjDetails.account }}</p>
                  <p><span class='span'>账号名称：</span>{{ infoZjDetails.accountName }}</p>
                  <p><span class='span'>开户行：</span>{{ infoZjDetails.bankName }}</p>
                </a-card>
                <a-card v-else>
                  <a-empty />
                </a-card>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-col>
      <a-col :span="12">
        <div class='container-div'>
          <a-row>
            <div class='text'>
              <a-col :span="20">
                <div class='text-div'>
                  <span>已配置的银行账号</span>
&lt;!&ndash;                  <span style='padding:0;color: #00A0E9' type="link">账号管理</span>&ndash;&gt;
                </div>
              </a-col>
            </div>
            <a-col :span="20">
              <div class='card-div'>
                <a-col :span="24">
                  <a-card v-if='infoDetails'>
                    <p><span class='span'>开户行：</span>{{ infoDetails.bankName }}</p>
                    <p><span class='span'>账号名称：</span>{{ infoDetails.userName }}</p>
                    <p><span class='span'>银行账号：</span>{{ infoDetails.bankAccountNo }}</p>
                  </a-card>
                  <a-card v-else>
                    <a-empty />
                  </a-card>
                </a-col>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>-->


  </div>
</template>

<script>
import { cloneObject } from '@/utils/util'
import { getBusinessAccountEntList, getBusinessAccountInfo, getFundSubAccountInfo } from '@/api/account'
export default {
  name: 'entAccountList',
  data() {
    return {
      loading: true,
      toggleSearchStatus: false,
      queryParam: {},
      tableData:[],
      selectedRowKeys: [],
      infoZjDetails:null,
      infoDetails:null,
      columns: [
        {
          title: '企业名称',
          align: 'center',
          width: 200,
          dataIndex: 'entName',
        },
        {
          title: '社会统一代码',
          align: 'center',
          width: 160,
          dataIndex: 'lisenceCreditCode',
        },
        {
          title: '企业负责人',
          dataIndex: 'lisenceLegal',
          align: 'center',
          width: 140
        },
        {
          title: '负责人证件号',
          dataIndex: 'cardNumber',
          align: 'center',
          width: 190
        },
        {
          title: '企业类型',
          align: 'center',
          width: 180,
          dataIndex: 'registerType',
          scopedSlots: {customRender: 'registerType'},
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: {customRender: 'action'},
          align: 'center',
          width: 180,
          fixed: 'right'
        }
      ],
      /* 分页参数 */
      ipagination:{
        current: 1,
        pageSize: 5,
        total: 0,
        pageSizeOptions: ['5', '15', '20'],
        showTotal: (total, range) => {
          return " 共" + total + "条"
        },
        showSizeChanger: true,
      },
    }
  },
  created() {
    this.getTableData();
  },
  methods:{
    rowSelection(selectedRowKeys,selectedRows) {
      this.loading = true;
      console.log(`下标: ${selectedRowKeys}`, '数据: ', selectedRows);
      this.getBusinessAccountInfoFun(selectedRowKeys[0])
      this.getFundSubAccountInfoFun(selectedRowKeys[0])

    },
    //账户详情
    getBusinessAccountInfoFun(id){
      let params = {};
      params.masterType = 2;
      params.masterId = id;
      getBusinessAccountInfo(params).then(res => {
        if (res.success) {
          // // 赋值表格数据
          this.infoDetails = res.result;

          this.loading = false;
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    //资金账户详情
    getFundSubAccountInfoFun(id){
      let params = {};
      params.category = 1;
      params.entId = id;
      getFundSubAccountInfo(params).then(res => {
        if (res.success) {
          // // 赋值表格数据
          this.infoZjDetails = res.result ;

          this.loading = false;
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    //首次获取表格数据
    getTableData(){
      this.loading = true;
      let params = {}; //查询条件
      let paramsNew = cloneObject(this.queryParam);
      params.data = paramsNew;
      params.pageNo = this.ipagination.current;
      params.pageSize = this.ipagination.pageSize;
      getBusinessAccountEntList(params).then(res => {
        if (res.success) {
          const data = res.result || {};
          // // 赋值表格数据
          this.tableData = data.records || [];
          // 赋值总条数
          this.ipagination.total = data.total || 0;
          this.loading = false;
        }else{
          this.$message.warning(res.message)
        }

      })
    },
    //查询
    searchQuerys() {
      this.getTableData();
    },
    //重置
    searchResets() {
      this.ipagination.current=1;
      this.queryParam = {};
      this.getTableData();
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      this.ipagination = pagination;
      this.getTableData();
    },
    //跳转详情
    goTo(record ,lock){
      this.$router.push({
        path: '/myAccount/entAccountManagementDetails',
        query:{
          bizId:record.id,
          pagetab:this.$route.query.pagetab?this.$route.query.pagetab:1
        }
      });
    },
  }
}
</script>
<style scoped lang='less'>
.content {
  background: #fff;
  box-sizing: border-box;
  padding: 20px;
  .title {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    padding: 10px 0 10px;
    border-bottom: 1px solid #ccc;
  }
  .table-page-search-wrapper{
    padding: 20px 0 0;
  }
  .container-title{
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    padding:30px 0 10px;
  }
  .container-div{
    padding-bottom: 30px;
    .text{
      display: block;
    }
    .text-div{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .card-div{
      margin: 20px 0;
      .span{
        display: inline-block;
        width: 30%;
      }
      /deep/ .ant-card-body{
        background: #fbfcff;
      }
    }
  }
}
</style>
